import ReactEcharts from 'echarts-for-react';
import {incomeColumnD} from "../../pages/Echarts/finance/financeData.ts";

const IncomeColumn = () => {
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
        },
        legend: {
            show: true,
            top: 0,
            left: 0,
            itemGap: 20,
            textStyle: {
                color: '#fff',
            },
        },
        grid: {
            top: '5%',
            left: '0%',
            right: '5%',
            bottom: '0%',
            containLabel: true,
        },
        xAxis: [
            {
                type: 'value',
                axisLabel: {
                    padding: [3, 0, 0, 0],
                    formatter: '{value}',
                    color: 'rgba(95, 187, 235, 1)',
                    interval: 0,
                    textStyle: {
                        fontSize: 10,
                        color: '#fff'
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    lineStyle: {
                        color: '#394458',
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: '#394458',
                    },
                },
            },
        ],
        yAxis: [
            {
                type: 'category',
                data: incomeColumnD.yAxis.reverse(),
                axisTick: {
                    alignWithLabel: true,
                },
                axisLine: {
                    lineStyle: {
                        color: '#394458',
                    },
                },
                axisLabel: {
                    // align: 'left',
                    interval: 0,
                    color: '#05D5FF',
                    textStyle: {
                        fontSize: 10,
                        color: '#fff'
                    },
                },
            },
        ],
        series: [
            {
                name: incomeColumnD.name1,
                type: 'bar',
                barWidth: '6',
                barGap: 0.5,
                barCategoryGap: '10%',
                data: incomeColumnD.data1.reverse(),
                label: {
                    show: true,
                    position: 'right',
                    formatter: '{c}',
                    fontSize: 10,
                    color: '#26B497'
                },
                itemStyle: {
                    normal: {
                        color: '#145A52',
                        borderColor: '#26B497',
                    },
                },
            },
            {
                name: incomeColumnD.name2,
                type: 'bar',
                barWidth: '6',
                barGap: 0.5,
                barCategoryGap: '10%',
                data: incomeColumnD.data2.reverse(),
                label: {
                    show: true,
                    position: 'right',
                    formatter: '{c}',
                    fontSize: 10,
                    color: '#32B1E1'
                },
                itemStyle: {
                    normal: {
                        color: '#0a4965',
                        borderColor: '#32B1E1',
                    },
                },
            },
        ],
    };

    return (
        <div style={{width: '100%', height: '100%'}}>
            <ReactEcharts style={{width: '100%', height: '100%'}} option={option}/>
        </div>
    );
};

export default IncomeColumn;